<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加部门</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">姓名: </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="nameId" placeholder="请输入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="emailId" class="col-sm-2 control-label">邮箱: </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="emailId" placeholder="邮箱号">
                </div>
            </div>
            <div class="form-group">
                <label for="userId" class="col-sm-2 control-label">角色：</label>
                <div class="col-sm-10">
                    <input type="text" id="userId" placeholder="角色" class="form-control load-sys-dept">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" id="typeId">产品类别：</label>
                <div class="col-sm-10">
                    <div id="box">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="ty" id="inlineCheckbox1" value="vue"> vue
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="ty" id="inlineCheckbox2" value="java"> java
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="ty" id="inlineCheckbox3" value="ui"> ui
                    </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="phoneId" class="col-sm-2 control-label">手机号：</label>
            <div class="col-sm-10">
                <input type="text" id="phoneId" placeholder="手机号" class="form-control load-sys-dept">
            </div>
        </div>
        <div class="form-group">
            <label for="academyId" class="col-sm-2 control-label">毕业院校：</label>
            <div class="col-sm-10">
                <input type="text" id="academyId" placeholder="毕业院校" class="form-control load-sys-dept">
            </div>
        </div>
        <div class="form-group">
            <label for="educationId" class="col-sm-2 control-label">学历：</label>
            <div class="col-sm-10">
                <input type="text" id="educationId" placeholder="学历" class="form-control load-sys-dept">
            </div>
        </div>

            <div class="form-group">
                <label for="remarkId" class="col-sm-2 control-label">备注：</label>
                <div class="col-sm-10">
                    <input type="text" id="remarkId" placeholder="备注" class="form-control load-sys-dept">
                </div>
            </div>


        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">取消</button>
            <button type="button" class="btn btn-info pull-right btn-save">确定</button>
        </div>
        <!-- /.box-footer -->
    </form>
    </div>

</div>
<script>


    $(function(){
         $(".box-footer")
             .on("click",".btn-save",doSaveOrUpdate);
         $(".box-footer")
            .on("click",".btn-cancel",doCancel)
        let data=$("#mainContentId").data("rowData");
        if(data)doInitEditFormData(data);


    });


    function doSaveOrUpdate() {
        let params = doGetEditFormData();
        let url = `http://localhost/student/`;
        let rowData = $("#mainContentId").data("rowData");
        let method = rowData ? 'put':'post';
        console.log("method="+method);
        $.ajax({
            method:method,
            url:url,
            crossDomain:true,
            xhrFields:{withCredentials:true},
            data:JSON.stringify(params),
            //data:params,
            contentType:"application/json",
            success(result){
                if(result.state ==1){
                    alert(result.message);
                    doCancel();
                }else{
                    alert(result.message);
                }
            }
        })

    }

    function doGetEditFormData() {
        let types =[];
        $("#box input:checkbox[name='ty']:checked").each(function () {
             types.push($(this).val());
        });
        console.log("types="+types);
       // let id=$("#mainContentId").data("rowData").id;
        let params;
        if ($("#mainContentId").data("rowData")){
             let id=$("#mainContentId").data("rowData").id;
             params = {
                id:id,
                name:$("#nameId").val(),
                email:$("#emailId").val(),
                user:$("#userId").val(),

                types:types,
                phone:$("#phoneId").val(),
                academy:$("#academyId").val(),
                remark:$("#remarkId").val(),
                education:$("#educationId").val()
            }
        }else {
            params = {
                name: $("#nameId").val(),
                email: $("#emailId").val(),
                user: $("#userId").val(),

                types: types,
                phone: $("#phoneId").val(),
                academy: $("#academyId").val(),
                remark: $("#remarkId").val(),
                education: $("#educationId").val()
            }
        }
        return params;
    }

    function doCancel() {
        $("#mainContentId").load("/modules/sys/student_list.html", function() {
            $("#mainContentId").removeData();
            //$("#parentId").removeData();
        })
    }

    function doInitEditFormData(data) {

        if (data.types){
            data.types.forEach(type=>{
                console.log("type="+type);
                if (type=="java"){
                    $("#box input:checkbox[id='inlineCheckbox2']").prop("checked",true);
                  //  console.log("checkbox="+ $("#box input:checkbox[value='option2']"));
                }
                if (type=="ui"){
                    $("#box input:checkbox[id='inlineCheckbox3']").prop("checked",true);
                }
                if (type=="vue"){
                    $("#box input:checkbox[id='inlineCheckbox1']").prop("checked",true);
                }
            })

        }

        $("#nameId").val(data.name);
        $("#emailId").val(data.email);
        $("#userId").val(data.user);
        //$("#typeId").val(data.types);
        $("#phoneId").val(data.phone);
        $("#academyId").val(data.academy);
        $("#educationId").val(data.education);
        $("#remarkId").val(data.remark);

        // let types =[];
        // $("#box input:checkbox[name='ty']:checked").each(function (i) {
        //      types.push($(this).val());
        //
        // });
        // console.log("types="+types);
    }


</script>